{% extends "manage/manage_layout.html" %}

{% block body %}
<div id="layout">
    <!-- Menu toggle -->
    <a href="#menu" id="menuLink" class="menu-link">
        <!-- Hamburger icon -->
        <span></span>
    </a>

    <div id="menu">
        <div class="pure-menu">
            <a class="pure-menu-heading" href="/manage/">管理后台</a>

            <ul class="pure-menu-list">
                <li class="pure-menu-item"><a href="/" class="pure-menu-link">返回首页</a></li>
                <li class="pure-menu-item"><a href="/profile/" class="pure-menu-link">个人首页</a></li>
                <li class="pure-menu-item"><a href="/manage/" class="pure-menu-link">内容管理</a></li>
                <li class="menu-item-divided pure-menu-selected">
                    <a href="/manage/category/" class="pure-menu-link">分类管理</a>
                </li>
                <li class="pure-menu-item"><a href="/manage/volume/" class="pure-menu-link">期数管理</a></li>
                <li class="pure-menu-item"><a href="/sign/out/" class="pure-menu-link">注销</a></li>
            </ul>
        </div>
    </div>

    <div id="main">
        <div class="header">
            <h1>{{ page_title }}</h1>
            <h2>兴趣是最好的老师，Hello GitHub 就是帮你找到编程的兴趣。</h2>
        </div>

        <div class="content">
            {# 新建分类 #}
            <form class="pure-form">
                <fieldset>
                    <div class="pure-control-group">
                        <label for="create-category-name">新建分类：</label>
                        <input id="create-category-name" name="category-name" type="text" class="pure-input-1-3" placeholder="Category Name">
                        <button id="create-category-submit" type="button" class="pure-button button-success">提交</button>
                        <a class="button-choose pure-button" href="/manage/category/">刷新</a>
                    </div>

                </fieldset>
            </form>

            {# 请求结果展示 #}
            <div class="pure-g-1" id="result">
                {# 展示分类 #}
                <table id="category-list" class="pure-table">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>操作</th>
                    </tr>
                </thead>
                    <tbody>
                    {% for category in categorys %}
                    <tr>
                        <td id="category-id">{{ category.id }}</td>
                        <td id="category-name">{{ category.name }}</td>
                        <td>
                            <button type="button" id="edit-category-button" value="{{ category.id }}" class="button-warning button-xsmall pure-button">编辑</button>
                            &nbsp;
                            <button type="button" id="delete-category-submit" class="button-error button-xsmall pure-button">删除</button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
{{ super() }}
<script src="{{ url_for('static', filename='js/manage_category.js')}}"></script>
{% endblock %}